import React from "react"
import { findDOMNode } from "react-dom"
import { BrowserRouter as Router, Route, Switch, NavLink, Redirect } from "react-router-dom"
import Screen from "./compontes/Screen"
import SettlementedScreen from "./SettlementedScreen"
import UnsettlementScreen from "./UnsettlementScreen"
import "./style/index.scss"

export interface BetRecodProps {
  history?: any
}

export interface BetRecodState {
  test: any
  topHeadHeight: any
}

class BetRecod extends React.Component<BetRecodProps, BetRecodState> {
  state = {
    test: "",
    topHeadHeight: 0
  }
  componentDidMount() {
    let headDom: any = findDOMNode(this.refs["topHead"])
    // console.log(headDom.offsetHeight);
    this.setState({
      topHeadHeight: headDom.offsetHeight
    })

    console.log(this)
  }
  render() {
    const { props } = this
    return (
      <Router>
        <Screen bgColor="#f6f9fb" contentTop={this.state.topHeadHeight}>
          <header style={{ backgroundColor: "#fff" }} className="bet-record-head" ref="topHead">
            <span
              onClick={() => {
                props.history.push("/user")
              }}
            >
              返回
            </span>
            <div className="head-tab">
              <NavLink activeClassName="active" to="/bet-record/settlemented">
                已结算
              </NavLink>
              <NavLink activeClassName="active" to="/bet-record/unsettlement">
                未结算
              </NavLink>
            </div>
            <span
              onClick={() => {
                alert("客服")
              }}
            >
              客服
            </span>
          </header>
          <Switch>
            <Route exact path="/bet-record/settlemented" component={SettlementedScreen} />
            <Route exact path="/bet-record/unsettlement" component={UnsettlementScreen} />
            <Redirect from="/bet-record" to="/bet-record/settlemented" />
          </Switch>
        </Screen>
      </Router>
    )
  }
}

export default BetRecod
